<template>
    <div id="create">
        <div class="bg_image"></div>
        <h1 class="title"><img alt="Vue logo" style="width: 30px" src="@/assets/bulb.svg" />商家中心</h1>

        <div class="areas">
            <div class="area" @click="toShop">
                <img alt="Vue logo" class="icon" src="@/assets/cat.svg" />查看门店</div>
            <div class="area" @click="toItem">
                <img alt="Vue logo" class="icon" src="@/assets/cat.svg" />查看商品</div>
            <div class="area" @click="toOrder">
                <img alt="Vue logo" class="icon" src="@/assets/cat.svg"/>查看订单</div>
        </div>

    </div>
</template>

<script setup>
import router from "@/router";

function toShop(){
    router.push('/businessShop')
}
function toItem(){
    router.push({path:'/businessItem'})
}
function toOrder(){
    router.push({path:'/businessOrder'})
}

</script>

<style>


.title {
    font-size: 35px;
    margin-bottom: 20px;
    position: fixed;
    top: 70px;
    padding: 10px 20px;
    z-index: 999;
    width: 100%;
    text-align: center;
    color: white;
    display: inline-block;
    align-items: center; /* 水平居中 */
}
.title img {
    margin-right: 20px; /* 为图片添加右边距 */
}

.areas {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh; /* 使用视口高度作为容器高度 */
}
.icon {

    width: 50px;
    margin-right:20px;

}

.icon img {
    width: 100%;
    height: 100%;
}
.area {
    width: 600px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    cursor: pointer;
    border-radius: 10px;
    margin-bottom: 20px;
    background-color: rgba(135, 206, 250, 0.5);
    color: white;
}
#create{
    /* 其他样式属性 */
    display: flex;
    flex-direction: column; /* 将子元素垂直排列 */
    align-items: center; /* 水平居中 */
}



.bg_image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('@/assets/green.png');
    background-size: cover;
    background-position: center;
    z-index: -1;

}

</style>
